<div ng-app="userApp">
    <div class="row">    
        <div id="loginbox" style="margin-top:50px;float:left;" class="mainbox col-md-6 col-md-offset-0 col-sm-8 col-sm-offset-2">                    
            <div class="panel panel-info" >
                <div class="panel-heading">
                    <div class="panel-title">Đăng nhập</div>
                    <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div>
                </div>     

                <div style="padding-top:30px" class="panel-body" >

                    <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>

                    <form id="loginform" class="form-horizontal" role="form">

                        <div style="margin-bottom: 25px" class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                    <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">                                        
                                </div>

                        <div style="margin-bottom: 25px" class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                    <input id="login-password" type="password" class="form-control" name="password" placeholder="password">
                                </div>



                        <div class="input-group">
                                  <div class="checkbox">
                                    <label>
                                      <input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
                                    </label>
                                  </div>
                                </div>


                            <div style="margin-top:10px" class="form-group">
                                <!-- Button -->

                                <div class="col-sm-12 controls">
                                  <a id="btn-login" href="#" class="btn btn-success">Login  </a>
                                  <a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>

                                </div>
                            </div>


                            <div class="form-group">
                                <div class="col-md-12 control">
                                    <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
                                        Don't have an account! 
                                    <a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()">
                                        Sign Up Here
                                    </a>
                                    </div>
                                </div>
                            </div>    
                        </form>     



                </div>                     
            </div>  
        </div>
        <div id="signupbox" style="display:block; margin-top:50px;float: left;" class="mainbox col-md-6 col-md-offset-0 col-sm-8 col-sm-offset-2" ng-controller="signupController">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <div class="panel-title">Tạo tài khoản mới</div>
                    <div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()">Sign In</a></div>
                </div>  
                <div class="panel-body" >
                    <form id="signupForm" name="signupForm" ng-submit="signupProcess(signupForm)" class="form-horizontal" novalidate>

                        <div class="form-group" ng-class="{ 'has-error' : signupForm.email.$error.required && submitted ||  signupForm.$error.email && submitted ||  signupForm.email.$error.havemail && submitted}">
                            <label for="email" class="col-md-3">Email</label>
                            <div class="col-md-9">
                                <input type="email" class="form-control" name="email" placeholder="Email" ng-model="signup.email" required>
                                <p ng-show="submitted && signupForm.email.$error.required" class="help-block">Email không được để trống.</p>
                                <p ng-show="submitted && signupForm.$error.email" class="help-block">Email không hợp lệ.</p>
                                <p ng-show="submitted && signupForm.$error.havemail" class="help-block">Email này đã được đăng kí.</p>
                            </div>
                        </div>

                        <div class="form-group" ng-class="{ 'has-error' : signupForm.name.$error.required && submitted}">
                            <label for="name" class="col-md-3">Họ tên</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="name" placeholder="Họ và tên" ng-model="signup.name" required>
                                <p ng-show="submitted && signupForm.name.$error.required" class="help-block">Họ tên không được để trống.</p>
                            </div>
                        </div>
                        
                        <div class="form-group" ng-class="{ 'has-error' : signupForm.password.$error.required && submitted || submitted && signupForm.password.$error.minlength}">
                            <label for="password" class="col-md-3">Mật khẩu</label>
                            <div class="col-md-9">
                                <input type="password" class="form-control" name="password" ng-minlength="6" ng-model="signup.password" required>
                                <p ng-show="submitted && signupForm.password.$error.required" class="help-block">Mật khẩu không được để trống.</p>
                                <p ng-show="submitted && signupForm.password.$error.minlength" class="help-block">Mật khẩu quá ngắn (tối thiểu là 6 kí tự).</p>
                                <p ng-show="submitted && signupForm.password.$error.maxlength" class="help-block">Username is too long.</p>

                            </div>
                        </div>
                        
                        <div class="form-group" ng-class="{ 'has-error' : signupForm.passwordConfirm.$error.required && submitted || submitted && signupForm.passwordConfirm.$error.match}">
                            <label for="passwordConfirm" class="col-md-3">Nhập lại mật khẩu</label>
                            <div class="col-md-9">
                                <input type="password" class="form-control" name="passwordConfirm" ng-model="signup.passwordConfirm" required data-match="signup.password">
                                <p ng-show="submitted && signupForm.passwordConfirm.$error.required" class="help-block">Mật khẩu xác nhận không được để trống.</p>
                                <p ng-show="submitted && signupForm.passwordConfirm.$error.match" class="help-block">Mật khẩu không khớp.</p>
                            </div>
                        </div>

                        <div class="form-group" ng-class="{ 'has-error' : signupForm.verifycode.$error.required && submitted }">
                            <label for="verifycode" class="col-md-3">Mã xác nhận</label>
                            <div class="col-md-6">
                                <input type="text" class="form-control" name="verifycode" placeholder="" ng-model="signup.verifycode" required>
                                <p ng-show="submitted && signupForm.verifycode.$error.required" class="help-block">Mã xác nhận không khớp.</p>
                            </div>
                            <div class="col-m-3">
                                <img border="0"  id="captcha" src="<?php print base_url() . ('users/captcha'); ?>" alt="">
                            </div>
                        </div>

                        <div class="form-group">
                            <!-- Button -->                                        
                            <div class="col-md-offset-3 col-md-9">
                                <button ng-disabled="loadingTracker.active()" data-ng-click="signupProcess(signupForm)" id="btn-signup" type="submit" class="btn btn-info">
                                    <i class="icon-hand-right"></i>
                                    &nbsp Đăng kí
                                </button>
                                <span ng-show="loadingTracker.active()" id="ajax-loading" class="ajax-loading margin-9"></span>
                            </div>
                        </div>

                        <div style="border-top: 1px solid #999; padding-top:20px"  class="form-group">

                            <div class="col-md-offset-3 col-md-9">
                                <button id="btn-fbsignup" type="button" class="btn btn-primary"><i class="icon-facebook"></i>   Sign Up with Facebook</button>
                            </div>                                           

                        </div>
                    </form>
                 </div>
            </div>
         </div> 
        <div class="clf"></div>
    </div>
</div>